<template>
  <div>
    <div style="padding: 10px">
      <div style="padding-block-end: 10px">
        <el-input id="task_name" v-model="project_page.project_name" placeholder="请输入项目名称" style="width: 800px; padding-right: 10px;" />
        <el-button type="primary" @click="get_project_list">搜索</el-button>
        <el-button style="float: right" type="success" @click="add_dialog">新增项目</el-button>
      </div>
      <el-table
        :data="project_data"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        style="float:left;width:100%"
      >
        <el-table-column align="center" label="ID">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="项目名称" width="200px">
          <template slot-scope="scope">
            {{ scope.row.project_name }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="项目描述" align="left" width="400px">
          <template slot-scope="scope">
            {{ scope.row.project_describe }}
          </template>
        </el-table-column>
        <el-table-column label="更新人" align="center">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column align="left" prop="update_time" label="更新时间">
          <template slot-scope="scope">
            <span>{{ scope.row.update_time }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="create_time" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="action" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="edit_dialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="del_dialog(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        background
        :current-page="project_page.current_page"
        :page-sizes="[10, 20, 50]"
        :page-size="project_page.size_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="project_total"
        style="float: left; padding: 10px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div style="padding: 50px">
      <el-dialog
        title="项目"
        :visible.sync="add_project_dialog"
        width="40%"
      >
        <el-form ref="form" :model="project_form" label-width="100px">
          <el-form-item v-show="2 === number" label="id：">
            <el-input v-model="project_form.id" disable="true" disabled />
          </el-form-item>
          <el-form-item label="项目名称：">
            <el-input v-model="project_form.project_name" />
          </el-form-item>
          <el-form-item label="项目描述：">
            <el-input v-model="project_form.project_describe" />
          </el-form-item>
          <el-form-item>
            <div v-show="1 === number">
              <el-button type="primary" style="float: right" @click="add_pro">立即创建</el-button>
            </div>
            <div v-show="2 === number">
              <el-button type="primary" style="float: right" @click="edit_pro">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="del_pro_dialog"
        width="18%"
      >
        <span>环境变量删除确认后，即可删除</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="del_pro_dialog = false">取 消</el-button>
          <el-button type="primary" @click="del_pro">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { edit_project, project_list, add_project, del_project } from "@/api/project";

export default {
  name: "Project",
  data() {
    return {
      del_pro_dialog: false,
      number: null,
      project_id: null,
      project_form: {},
      add_project_dialog: false,
      project_data: [],
      project_page: {
        project_name: "",
        current_page: 1,
        size_page: 10,
      },
      project_total: 0,
    }
  },
  created() {
    this.get_project_list()
  },
  methods: {
    get_project_list() {
      const req = this.project_page
      req.user_id = localStorage.getItem("user_id")
      project_list(req).then(res => {
        if (res.data.code === 200) {
          this.project_data = res.data.content
          this.project_total = res.data.project_total
          this.project_page.current_page = res.data.current_page
          this.project_page.size_page = res.data.size_page
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 页签-条/页 跳转
    handleSizeChange(val) {
      this.project_page.size_page = val
      this.get_project_list()
    },
    // 底部页签跳转
    handleCurrentChange(val) {
      this.project_page.current_page = val
      this.get_project_list()
    },
    add_dialog() {
      this.number = 1
      this.add_project_dialog = true
      this.project_form = {}
    },
    add_pro() {
      const req = this.project_form
      req.user_id = localStorage.getItem("user_id")
      add_project(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_project_dialog = false
          this.get_project_list()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    edit_dialog(data) {
      this.number = 2
      this.add_project_dialog = true
      this.project_form = data
    },
    edit_pro() {
      const req = this.project_form
      req.user_id = localStorage.getItem("user_id")
      edit_project(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_project_dialog = false
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    del_dialog(data) {
      this.del_pro_dialog = true
      this.project_id = data
    },
    del_pro() {
      const req = {}
      req.user_id = localStorage.getItem("user_id")
      req.id = this.project_id
      del_project(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.del_pro_dialog = false
          this.get_project_list()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
